import 'package:flutter/material.dart';

class StockPage extends StatefulWidget {
  const StockPage({super.key});

  @override
  State<StockPage> createState() => _StockPageState();
}

class _StockPageState extends State<StockPage> {
  final ScrollController rightHorizontalController =
      ScrollController(); // 右侧横向滚动
  final ScrollController rightVerticalController = ScrollController(); // 右侧上下滚动
  final ScrollController leftVerticalController = ScrollController(); // 左侧上下滚动

  bool _isLeftScrolling = false;
  bool _isRightScrolling = false;

  final List<Map<String, String>> stockData = List.generate(100, (index) {
    return {
      'name': '现货黄金$index',
      'code': 'UUSD$index',
      'price': '2917.${index * 10}',
      '涨跌': '+12.${index * 5}',
      '幅度': '+0.${index * 2}%',
      '买价': '2917.${index * 2}',
      '卖价': '2917.${index * 3}'
    };
  });

  @override
  void initState() {
    super.initState();
    // **同步左右滚动**
    leftVerticalController.addListener(() {
      if (!_isRightScrolling) {
        _isLeftScrolling = true;
        rightVerticalController.jumpTo(leftVerticalController.offset);
        _isLeftScrolling = false;
      }
    });

    rightVerticalController.addListener(() {
      if (!_isLeftScrolling) {
        _isRightScrolling = true;
        leftVerticalController.jumpTo(rightVerticalController.offset);
        _isRightScrolling = false;
      }
    });
  }

  @override
  void dispose() {
    rightHorizontalController.dispose();
    rightVerticalController.dispose();
    leftVerticalController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("股票数据")),
      body: Row(
        children: [
          // 左侧固定列
          SizedBox(
            width: 100,
            child: Column(
              children: [
                // 左侧表头
                Container(
                  height: 50,
                  alignment: Alignment.center,
                  color: Colors.grey[300],
                  child: const Text("名称"),
                ),
                // 左侧数据列表（使用 ListView.builder 确保流畅滚动）
                Expanded(
                  child: ListView.builder(
                    controller: leftVerticalController,
                    itemCount: stockData.length,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 50,
                        alignment: Alignment.center,
                        color: Colors.grey[200],
                        child: Text(stockData[index]['name']!),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          // 右侧滚动区域
          Expanded(
            child: Scrollbar(
                thumbVisibility: true, // 始终显示滚动条
                controller: rightHorizontalController, // 作用于水平滚动
                child: SingleChildScrollView(
                  physics: const ClampingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  controller: rightHorizontalController,
                  child: SizedBox(
                    width: 480,
                    child: Column(
                      children: [
                        // 右侧表头
                        Container(
                          height: 50,
                          color: Colors.grey[300],
                          child: Row(
                            children: [
                              _buildHeaderCell("代码"),
                              _buildHeaderCell("价格"),
                              _buildHeaderCell("涨跌"),
                              _buildHeaderCell("幅度"),
                              _buildHeaderCell("买价"),
                              _buildHeaderCell("卖价"),
                            ],
                          ),
                        ),
                        // 右侧数据列表
                        Expanded(
                          child: Scrollbar(
                              controller: rightVerticalController,
                              thumbVisibility: true, // 始终显示滚动条
                              child: ListView.builder(
                                controller: rightVerticalController,
                                itemCount: stockData.length,
                                itemBuilder: (context, index) {
                                  final data = stockData[index];
                                  return Row(
                                    children: [
                                      _buildDataCell(data['code']!),
                                      _buildDataCell(data['price']!),
                                      _buildDataCell(data['涨跌']!),
                                      _buildDataCell(data['幅度']!),
                                      _buildDataCell(data['买价']!),
                                      _buildDataCell(data['卖价']!),
                                    ],
                                  );
                                },
                              )),
                        ),
                      ],
                    ),
                  ),
                )),
          ),
        ],
      ),
    );
  }

  Widget _buildHeaderCell(String text) {
    return Container(
      width: 80,
      alignment: Alignment.center,
      padding: const EdgeInsets.all(8),
      //decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      child: Text(text, style: const TextStyle(fontWeight: FontWeight.bold)),
    );
  }

  Widget _buildDataCell(String text) {
    return Container(
      width: 80,
      height: 50, // 让行高保持一致
      alignment: Alignment.center,
      padding: const EdgeInsets.all(8),
      //decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      child: Text(text),
    );
  }
}
